<template>
	<Layout showFooter>
		<template #title>编辑律师</template>
		<ScorllRefresher @refresh="loadData">

			<view class="inline-flex fill jcsb recommend-lawyer-section">
				<view v-for="item of list" :key="item.id" class="inline-flex column recommend-lawyer">
					<view class="iflex aic jcc edit-button" @click.stop="tapEdit(item.id)">编辑</view>
					<view class="recommend-lawyer__image aspect-fill">
						<image mode="aspectFill" :src="item.avatar"></image>
					</view>
					<view class="recommend-lawyer__leading">
						<image src="/static/image/law/leading-lawyer.png"></image>
						<view>金牌律师</view>
					</view>
					<view class="inline-flex column fill aic recommend-lawyer__info">
						<view class="recommend-lawyer__info__name">{{item.lawyerName}}</view>
						<view class="recommend-lawyer__info__other">执业{{item.practice}}年
							<text>|</text>
							咨询人数{{item.consultation}}人
						</view>
						<view class="recommend-lawyer__info__advantage">
							{{item.special}}
						</view>
					</view>
				</view>
			</view>
		</ScorllRefresher>

		<template #footer>
			<view class="common-footer">
				<u-button :customStyle="{width:'100%'}" type="primary" size="large" @click.stop="tapAdd">新增</u-button>
			</view>
		</template>
	</Layout>
</template>

<script setup lang="ts" name="LawLawyerList">
	import Layout from '@/components/layout/layout.vue';
	import ScorllRefresher from '@/components/scroll-refresher/scroll-refresher.vue';
	import { ref } from 'vue';
	import { getLawyerListOfLaw } from '@/apis/lawfirm'
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import type { AnyObj } from '@/types/global';
	import { Action } from '@/utils/constant';


	let lawFirmId = '';
	const list = ref<AnyObj[]>([]);
	function tapEdit(id : string) {
		uni.navigateTo({
			url: `/pages-lawyer/crud-lawyer/crud-lawyer?lawFirmId=${lawFirmId}&id=${id}&action=${Action.Edit}`
		})
	}

	function tapAdd() {
		uni.navigateTo({
			url: `/pages-lawyer/crud-lawyer/crud-lawyer?lawFirmId=${lawFirmId}&action=${Action.Add}`
		})
	}


	function loadData() {
		list.value = [];
		getLawyerListOfLaw(lawFirmId).then((res) => {
			list.value = res.rows ?? [];
		});
	}

	onPullDownRefresh(() => {
		loadData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	});

	onLoad((options) => {
		options = options as { lawFirmId : string; }
		lawFirmId = options.lawFirmId;
		loadData();
	});

	uni.$on('lawyer-list-refresh', () => {
		loadData();
	});
</script>

<style lang="scss">
	.recommend-lawyer-section {
		padding: 32rpx;

		.edit-button {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
			width: 96rpx;
			height: 52rpx;
			flex-shrink: 0;
			border-radius: 0 14rpx;
			background: #D9D9D9;
		}
	}
</style>